<template>
    <!-- AI识别 -->
    <view @click="AI_UploadFn" class="AI card mt16 ml16 mr16">
        <view class="AIPic">
            <image src="/static/other/AI-shibie.svg" mode="" />
        </view>

        <view class="txt ml16">身份证智能识别</view>
    </view>

    <!-- 添加就诊人表单 -->
    <view class="addPatientForm mt16">
        <view class="form_item">
            <view class="form_label">真实姓名</view>
            <input type="text" class="form_input" v-model="AI_Form.name" placeholder="请输入姓名">
        </view>

        <view class="form_item">
            <view class="form_label">性别</view>
            <picker mode="selector" :range="['男', '女']" class="address_picker">
                <view class="address">
                    <view class="address_info">{{ AI_Form.sex.length > 0 ? AI_Form.sex : '请选择性别' }}</view>
                    <image src="/static/other/gengduo.svg" mode="" />
                </view>
            </picker>
        </view>

        <view class="form_item">
            <view class="form_label">出生日期</view>
            <picker mode="date" class="address_picker">
                <view class="address">
                    <view class="address_info">{{ AI_Form.born.length > 0 ? AI_Form.born : '请选择日期' }}</view>
                    <image src="/static/other/gengduo.svg" mode="" />
                </view>
            </picker>
        </view>

        <view class="form_item">
            <view class="form_label">成员关系</view>
            <picker mode="selector" :range="['本人', '父母', '其他']" class="address_picker">
                <view class="address">
                    <view class="address_info">{{ AI_Form.relation.length > 0 ? AI_Form.relation : '请选择成员关系' }}</view>
                    <image src="/static/other/gengduo.svg" mode="" />
                </view>
            </picker>
        </view>

        <view class="form_item">
            <view class="form_label">身份证</view>
            <input type="text" class="form_input" v-model="AI_Form.id_card" placeholder="请输入身份证">
        </view>

        <view class="form_item">
            <view class="form_label">手机号</view>
            <input type="text" class="form_input" placeholder="请输入手机号">
        </view>
    </view>

    <view style="heigth:200rpx"></view>

    <view class="ft">
        <view>取消</view>
        <view>确认添加</view>
    </view>
</template>

<script setup lang="ts">
import { uploadImg } from '@/utils/upload'
import { uploadAIURL } from '@/http/env'
import { reactive } from 'vue'
import type { ID_CARD } from '@/dataType/data'


//要填写的表单对象
const AI_Form = reactive({
    name: '',
    sex: '',
    born: '',
    relation: '',
    id_card: '',
    phone: ''
})


//AI识别
const AI_UploadFn = async () => {
    //调用封装的AI识别方法
    const res = await uploadImg(uploadAIURL, '正在识别中', '识别失败')
    console.log('身份证识别的结果：', JSON.parse(res.data).data)
    const result = JSON.parse(res.data).data as ID_CARD;
    AI_Form.name = result.name;
    AI_Form.born = result.born.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3')
    AI_Form.sex = result.sex
    AI_Form.id_card = result.id_card
}


</script>

<style lang="scss">
@import "@/assets/style/public.scss";

page {
    background: #f7f7f7;
}

.AI {
    display: flex;

    .AIPic {
        image {
            width: 140rpx;
            height: 140rpx;
        }
    }

    .txt {
        display: flex;
        align-items: center;
    }
}

.addPatientForm {
    background: #fff;
}
</style>